const path = require('path');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 存放build结果的文件夹(主要是为了填prerender在配置了baseUrl后带来的坑,下面会说)
const DIST_ROOT = 'dist';
// 项目部署在服务器里的绝对路径，默认'/'，参考https://cli.vuejs.org/zh/config/#baseurl
const BASE_URL = '/';
// 转为CND外链方式的npm包，键名是import的npm包名，键值是该库暴露的全局变量，参考https://webpack.js.org/configuration/externals/#src/components/Sidebar/Sidebar.jsx
const externals = {
};
/**
 * 外置库
 * 把需要的第三方库全部放入数组中
 */
const cdn = {
	css: [],
	js: [
		'//res.wx.qq.com/open/js/jweixin-1.4.0.js',
		'//webapi.amap.com/maps?v=1.4.15&key=d5ed672fae3a78df08455344ab73d90d',
		'//webapi.amap.com/ui/1.0/main.js',
		'//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js',
		BASE_URL + 'js/pinyin_dict_withtone.js',
		BASE_URL + 'js/pinyin_dict_notone.js',
		BASE_URL + 'js/pinyinUtil.js'
	]
};
// 是否使用gzip
const productionGzip = true;
// 需要gzip压缩的文件后缀
const productionGzipExtensions = ['js', 'css'];
const resolve = file => path.resolve(__dirname, file);
module.exports = {
	publicPath: BASE_URL,

	// prerendner会借助一个express服务器来预渲染，改变baseUrl后要保证这个模拟服务器能够找到所需的资源
	outputDir: DIST_ROOT + BASE_URL,

	assetsDir: 'static',
	productionSourceMap: false,

	css: {
		loaderOptions: {
			stylus: {
				import: [resolve('./src/style/theme.custom.styl')]
			}
		}
	},

	transpileDependencies: ['mand-mobile'],

	configureWebpack: config => {
		const myConfig = {
			plugins: []
		};
		myConfig.externals = externals;
		if (process.env.NODE_ENV === 'production') {
			// 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip
			productionGzip &&
				myConfig.plugins.push(
					new CompressionWebpackPlugin({
						test: new RegExp(
							'\\.(' + productionGzipExtensions.join('|') + ')$'
						),
						threshold: 8192,
						minRatio: 0.8
					})
				);
		}
		if (process.env.NODE_ENV === 'development') {
			/**
			 * 关闭host check，方便使用ngrok之类的内网转发工具
			 */
			myConfig.devServer = {
				port: 80,
				disableHostCheck: true,
				https: false
			};
		}
		return myConfig;
	},

	chainWebpack: config => {
		/**
		 * SVG图标处理
		 */
		const svgRule = config.module.rule('svg');
		svgRule.uses.clear();
		svgRule.include
			.add(resolve('./src/assets/svgs'))
			.end()
			.use('svg-sprite-loader')
			.loader('svg-sprite-loader')
			.end();
		/**
		 * 处理markdown
		 */
		config.module
			.rule('markdown')
			.test(/\.md$/)
			.use('text-loader')
			.loader('text-loader')
			.end();
		/**
		 * vue的template的style属性中涉及到px的也都通过此loader转换成为vw
		 */
		config.module
			.rule('vue')
			.test(/\.vue$/)
			.use('style-vw-loader')
			.loader('style-vw-loader')
			.tap(options => {
				options = {
					unitToConvert: 'px',
					viewportWidth: 750,
					viewportHeight: 1334,
					unitPrecision: 3,
					viewportUnit: 'vw',
					fontViewportUnit: 'vw',
					minPixelValue: 1
				};
				return options;
			});
		/**
		 * 删除懒加载模块的prefetch，降低带宽压力
		 * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
		 * 而且预渲染时生成的prefetch标签是modern版本的，低版本浏览器是不需要的
		 */
		config.plugins.delete('prefetch');
		/**
		 * 添加CDN参数到htmlWebpackPlugin配置中
		 */
		config.plugin('html').tap(args => {
			args[0].cdn = cdn;
			return args;
		});
	}
};
